<template>
    <div :class="prefixCls">
        <div ref="editor" class="editor-wrapper"></div>
    </div>
</template>

<script>
import WEditor from 'wangeditor'

export default {
    name: 'WangEditor',
    model: {
        event: 'change',
    },
    props: {
        prefixCls: {
            type: String,
            default: 'ant-editor-wang',
        },
        value: {
            type: String,
        },
    },
    data() {
        return {
            editor: null,
            editorContent: null,
            isChange: false,
        }
    },
    watch: {
        value: {
            handler(val) {
                if (!this.isChange) {
                    this.$nextTick(() => {
                        this.editor.txt.html(val)
                    })
                }
                this.isChange = false
            },
            immediate: true,
        },
    },
    mounted() {
        this.initEditor()
    },
    methods: {
        initEditor() {
            this.editor = new WEditor(this.$refs.editor)
            this.editor.config.onchange = (html) => {
                this.editorContent = html
                this.isChange = true
                this.$emit('change', this.editorContent)
            }
            this.editor.config.zIndex = 0
            this.editor.create()
        },
    },
}
</script>

<style lang="less" scoped>
.ant-editor-wang {
    .editor-wrapper {
        text-align: left;
    }
}
</style>
